<template>
  <template v-for="item in menuTree" :key="item.id">
    <q-item
      v-if="!item.children"
      :active="activeStatus(item)"
      @click="handleClick(item)"
      clickable
    >
      <q-item-section avatar>
        <q-icon :name="item.icon" />
      </q-item-section>
      <q-item-section>
        <q-item-label>{{ item.name }}</q-item-label>
      </q-item-section>
    </q-item>
    <q-expansion-item
      :header-class="{
        'text-primary': activeStatus(item),
      }"
      :icon="item.icon"
      :label="item.name"
      :content-inset-level="0.2"
      v-else
    >
      <MenuItem :menu-tree="item.children"></MenuItem>
    </q-expansion-item>
  </template>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { openURL } from 'quasar';
import { useLayoutStore } from 'src/stores/layout-store';

interface Props {
  // 菜单树
  menuTree: Array<WJ.MenuItem>;
}
withDefaults(defineProps<Props>(), {});
const layout = useLayoutStore();
const router = useRouter();

const activeStatus = (item: WJ.MenuItem) => {
  return layout.crumbsList.filter((i) => i.id === item.id).length > 0;
};
const handleClick = (item: WJ.MenuItem) => {
  if (item.isBlank) {
    if (layout.isHttp(item.path)) {
      openURL(item.path);
    } else {
      openURL(router.resolve({ path: item.path }).href);
    }
  } else {
    router.push(layout.toBind(item));
  }
};
</script>

<style scoped></style>
